<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
</head>

<body>
    <div id="app">
        <h1>hello App!!</h1>
        <!-- 使用router-link 组件来导航-->
        <!-- 通过 `to` 属性指定链接 -->
        <!-- `<router-link>`会默认渲染成一个`<a>`标签 -->
        <p>
            <router-link to="/foo">Go to foo</router-link>
            <router-link to="/bar">Go to bar</router-link>
        </p>

        <router-view></router-view>
    </div>

    <script>
        //0. 如果使用模块化机制编程，导入Vue和VueRouter,要调用Vue.use(Vue.Router)

        //1.定义路由组件
        //可以从其他文件import进来

        const Foo = {
            template: '<div>foo</div>'
        }
        const Bar = {
            template: '<div>bar</div>'
        }

        //2.定义路由
        //每个路由应该映射一个组件
        //其中component可以是通过Vue.extend()创建的组件构造器
        //或者，只是一个组件配置对象
        const routes = [{
            path: '/foo',
            component: Foo
        }, {
            path: '/bar',
            component: Bar
        }]

        //3.创建router实例，传`routes`配置
        const router = new VueRouter({
            routes //缩写，相当于 routes:routes
        })

        //4.创建和挂载根实例
        //记得要通过router配置参数注入路由
        //从而让整个应用都有路由功能
        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

<!-- <router-link>相关属性 -->

<!-- 
to 表示目标路由的链接。
当被点击后，内部会立刻把 to 的值传到 router.push()，
所以这个值可以是一个字符串或者是描述目标位置的对象。 -->

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

<!-- 
replace 设置 replace 属性的话，
当点击时，会调用 router.replace() 而不是 router.push()，
导航后不会留下 history 记录。 -->
<router-link :to="{ path: '/abc'}" replace></router-link>

<!-- 
append 设置 append 属性后，则在当前 (相对) 路径前添加基路径。
例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b -->
<router-link :to="{ path: 'relative/path'}" append></router-link>

<!-- tag 有时候想要<router-link> 渲染成某种标签，例如 <li>。  -->
<!-- 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。 -->
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

<!-- active-class 设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。 -->
<style>
    ._active {
        background-color: red;
    }
</style>
<p>
    <router-link v-bind:to="{ path: '/route1'}" active-class="_active">Router Link 1</router-link>
    <router-link v-bind:to="{ path: '/route2'}" tag="span">Router Link 2</router-link>
</p>

<!-- 
注意这里 class 使用 active_class="_active"。 
exact-active-class 配置当链接被精确匹配的时候应该激活的 class。
可以通过以下代码来替代。 -->
<p>
    <router-link v-bind:to="{ path: '/route1'}" exact-active-class="_active">Router Link 1</router-link>
    <router-link v-bind:to="{ path: '/route2'}" tag="span">Router Link 2</router-link>
</p>

<!-- event 声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。 -->
<router-link v-bind:to="{ path: '/route1'}" event="mouseover">Router Link 1</router-link>
<!-- 以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。 -->



<!-- exact-active-class 和 active-class 的区别 -->

<!-- router-link 默认情况下的路由是模糊匹配，
    例如当前路径是 /article/1 那么也会激活 <router-link to="/article">，
    所以当设置 exact-active-class 以后，
    这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class，例如： -->

<router-link to="/article" active-class="router-active"></router-link>

<!-- 当用户访问 /article/1 时会被激活为： -->
<a href="#/article" class="router-active" rel="nofollow"></a>

<!-- 而当使用： -->
<router-link to="/article" exact-active-class="router-active"></router-link>

<!-- 当用户访问 /article/1 时，不会激活这个 link 的 class： -->
<a href="#/article" rel="nofollow"></a>

</html>